<template>
  <div id="app">
    <div id="" style="margin-bottom: 20px;">
      <el-button type="primary" @click="fenbu">数据分布预警</el-button>
      <el-button type="primary" @click="quanjing">数据全景预警</el-button>
    </div>
    <div id="main" style="width: 100%;height: 500px;"></div>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
  export default {
    mounted() {
      this.fenbu()
    },
    methods: {
      fenbu() {
        let chartDom = document.getElementById('main');
        let myChart = echarts.init(chartDom, 'dark');
        let option;

        const colors = ['#5470C6', '#EE6666'];
        option = {
          color: colors,
          tooltip: {
            trigger: 'none',
            axisPointer: {
              type: 'cross'
            }
          },
          legend: {},
          grid: {
            top: 70,
            bottom: 50
          },
          xAxis: [{
              type: 'category',
              axisTick: {
                alignWithLabel: true
              },
              axisLine: {
                onZero: false,
                lineStyle: {
                  color: colors[1]
                }
              },
              axisPointer: {
                label: {
                  formatter: function(params) {
                    return (
                      'Precipitation  ' +
                      params.value +
                      (params.seriesData.length ? '：' + params.seriesData[0].data : '')
                    );
                  }
                }
              },
              // prettier-ignore
              data: ['2021-1', '2021-2', '2021-3', '2021-4', '2021-5', '2021-6', '2021-7', '2021-8', '2021-9',
                '2021-10', '2021-11', '2021-12'
              ]
            },
            {
              type: 'category',
              axisTick: {
                alignWithLabel: true
              },
              axisLine: {
                onZero: false,
                lineStyle: {
                  color: colors[0]
                }
              },
              axisPointer: {
                label: {
                  formatter: function(params) {
                    return (
                      'Precipitation  ' +
                      params.value +
                      (params.seriesData.length ? '：' + params.seriesData[0].data : '')
                    );
                  }
                }
              },
              // prettier-ignore
              data: ['2020-1', '2020-2', '2020-3', '2020-4', '2020-5', '2020-6', '2020-7', '2020-8', '2020-9',
                '2020-10', '2020-11', '2020-12'
              ]
            }
          ],
          yAxis: [{
            type: 'value'
          }],
          series: [{
              name: 'Precipitation(2020)',
              type: 'line',
              xAxisIndex: 1,
              smooth: true,
              emphasis: {
                focus: 'series'
              },
              data: [
                2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
              ]
            },
            {
              name: 'Precipitation(2021)',
              type: 'line',
              smooth: true,
              emphasis: {
                focus: 'series'
              },
              data: [
                3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7
              ]
            }
          ]
        };

        option && myChart.setOption(option);
      },
      quanjing() {
        let chartDom = document.getElementById('main');
        let myChart = echarts.init(chartDom, 'dark');
        let option;

        option = {
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            areaStyle: {}
          }]
        };

        option && myChart.setOption(option);
      }
    }
  }
</script>

<style lang="scss" scoped>
  #app {
    padding: 30px;
  }
</style>
